<template>
    <div class = "notice">
        <div class="notice-border"></div>
        <div class="current-row">
            <div class="aside">
            </div>
            <div class="content">
               <ul v-for="notice in allNotices">
                   <li>
                       <a href="http://localhost:8080/#/noticeDetail" class="title">{{notice.data_TITLE}}</a>
                       <p>{{notice.data_CONTENT}}</p>
                   </li>
               </ul>
          </div>
            <el-pagination
                    :background="true"
                    @current-change="handleCurrentChange"
                    :page-size="10"
                    layout="total,prev, pager, next, jumper"
                    :total="this.total">
            </el-pagination>
        </div>
        </div>

</template>

<script>
    export default {
        name: 'Notice',

        created(){
            const _this = this
            this.axios.get('http://localhost:9000/notice/list/0/10').then(function (res) {
                console.log(res.data)
                _this.allNotices = res.data.list
                _this.total = res.data.total
            })
        },

        methods: {
            handleCurrentChange(currentPage){
                // alert(currentPage)
                const _this = this
                this.axios.get('http://localhost:9000/notice/list/'+currentPage+'/10').then(function (res) {
                    console.log(res.data)
                    _this.allNotices = res.data.list
                    _this.total = res.data.total
            })
            }
        },

        data(){
            return{
                total: null,
                allNotices: [],
            }
        }
    }
</script>

<style>
    html,body{
        margin: 0px;
        padding: 0px;
    }
    .notice{
        width:1100px;
        /*height: 3000px;*/
        /*background-color: #dcdde1;*/
        margin-left: 20rem;
    }

    .current-row{
        width: 100%;
    }
    .aside{
        width:10%;
        text-align: center;
        line-height: 100px;
    }

    .content{
        width: 90%;
        padding-bottom: 50px;
    }
    .title{
        font-size: 16px;
        color: burlywood;
        text-decoration: none;
    }

.el-pagination{
   position: absolute;
    margin-left: 50rem;
    margin-top: -50px;
}
    /*.notice-border{*/
    /*    border-left: 1px solid rgba(215, 215, 215, 1);*/
    /*    border-right: 1px solid rgba(215, 215, 215, 1);*/
    /*}*/
    .el-pagination.is-background {
       color: #9C7049;
    }

</style>